// less 并没有提供for循环功能，但是可以使用守卫模拟递归去实现

.generate-columns(@total: 24; @i: 1) when (@i =< @total) {
  .column-@{i} {
    width: @i / @total * 100%;
  }
  .generate-columns(24, @i + 1);
}

.generate-columns();

/* ------------------------------------ */

.generate-flex(@total: 12; @i: 1) when (@i =< @total) {
  .flex-@{i} {
    width: @i / @total * 100%;
  }
  .generate-flex(12, @i + 1);
}

.generate-flex();

/* ------------------------------------ */

// 循环和递归配合 生成辅助类名
// ._m-l === ._m-left >>> margin-left

@set: {
  l: left;
  t: top;
  r: right;
  b: bottom;
};
.generate-help-pis(@total: 30; @i: 0) when (@i =< @total) {
  each(@set, {
    ._m-@{key} {
      margin-@{value}: unit(@i, px);
    }
    ._p-@{key} {
      padding-@{value}: unit(@i, px);
    }
    ._m-@{value} {
      margin-@{value}: unit(@i, px);
    }
    ._p-@{value} {
      padding-@{value}: unit(@i, px);
    }
  });
  ._m-@{i} {
    margin: unit(@i, px);
  }
  ._p-@{i} {
    padding: unit(@i, px);
  }
  .generate-help-pis(30, @i + 1);
}

.generate-help-pis();
